import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

function main() {

    /**
     * 相机
     */
    const fov = 75; // 视野范围
    const aspect = 2; // the canvas default，宽高比
    const near = 0.1;
    const far = 5;
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.z = 2;

    /**
     * 场景
     */
    const scene = new THREE.Scene();

    /**
     * 网格 = 几何体 + 材质
     */
    //几何体
    const boxWidth = 1;
    const boxHeight = 1;
    const boxDepth = 1;
    const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
    function buildMesh(geometry, color, x) {
        //材质
        const material = new THREE.MeshPhongMaterial({ color });
        //网格
        const mesh = new THREE.Mesh(geometry, material);
        mesh.position.x = x;

        scene.add(mesh);
        return mesh;
    }
    const meshs = [
        buildMesh(geometry, 0x44aa88, 0),
        buildMesh(geometry, 0x8844aa, -2),
        buildMesh(geometry, 0xaa8844, 2),
    ];

    /**
     * 光
     */
    const color = 0xFFFFFF;
    const intensity = 3;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(-1, 2, 4);

    scene.add(light);

    /**
     * 渲染器
     */
    const canvas = document.querySelector('#c');
    const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });

    /**
     * 渲染处理
     */
    //渲染版本1
    //renderer.render(scene, camera);
    //渲染版本2
    // function render(time) {
    //     time *= 0.001;  // 将时间单位变为秒

    //     mesh.rotation.x = time;
    //     mesh.rotation.y = time;

    //     renderer.render(scene, camera);

    //     requestAnimationFrame(render);
    // }

    //解决响应式设计模糊(分辨率不够)问题--调整canvas分辨率(内部尺寸)
    function resizeRendererToDisplaySize(renderer) {
        const canvas = renderer.domElement;
        //const width = canvas.clientWidth;
        //const height = canvas.clientHeight;
        //应对HD-DPI显示器
        const pixelRatio = window.devicePixelRatio;
        const width = Math.floor(canvas.clientWidth * pixelRatio);
        const height = Math.floor(canvas.clientHeight * pixelRatio);
        const needResize = canvas.width !== width || canvas.height !== height;
        if (needResize) {
            renderer.setSize(width, height, false);
        }
        return needResize;
    }

    //渲染版本3
    function render(time) {
        time *= 0.001; // convert time to seconds

        meshs.forEach((mesh, ndx) => {
            const speed = 1 + ndx * .1;
            const rot = time * speed;
            mesh.rotation.x = rot;
            mesh.rotation.y = rot;
        });

        //解决响应式设计拉伸问题和模糊(分辨率不够)问题
        if (resizeRendererToDisplaySize(renderer)) {
            //解决响应式设计拉伸问题--相机的宽高比设置为canvas的宽高比
            const canvas = renderer.domElement;
            camera.aspect = canvas.clientWidth / canvas.clientHeight;
            camera.updateProjectionMatrix();
        }

        renderer.render(scene, camera);

        requestAnimationFrame(render);

    }

    requestAnimationFrame(render);


}

main();